<div class="page-layout carded right-sidebar">

    <!-- TOP BACKGROUND -->
    <div class="top-bg accent"></div>
    <!-- / TOP BACKGROUND -->

    <!-- SIDEBAR -->
    <base-sidebar class="sidebar" name="carded-right-sidebar-1" position="right" lockedOpen="gt-md">

        <!-- SIDEBAR HEADER -->
        <div class="header p-24 accent">
            <h2 class="m-0">Sidebar header</h2>
        </div>
        <!-- / SIDEBAR HEADER -->

        <!-- SIDEBAR CONTENT -->
        <div class="content p-24">
            <base-demo-sidebar></base-demo-sidebar>
        </div>
        <!-- / SIDEBAR CONTENT -->

    </base-sidebar>
    <!-- / SIDEBAR -->

    <!-- CENTER -->
    <div class="center">

        <!-- CONTENT HEADER -->
        <div class="header accent p-24">
            <h2 class="m-0">Right sidebar with content scroll</h2>
        </div>
        <!-- / CONTENT HEADER -->

        <!-- CONTENT CARD -->
        <div class="content-card">

            <!-- CONTENT TOOLBAR -->
            <div class="toolbar px-24 py-8">

                <button mat-icon-button class="sidebar-toggle" fxHide.gt-md
                        (click)="toggleSidebar('carded-right-sidebar-1')">
                    <mat-icon>menu</mat-icon>
                </button>

                <span>Content toolbar</span>

            </div>
            <!-- / CONTENT TOOLBAR -->

            <!-- CONTENT -->
            <div class="content p-24">
                <base-demo-content></base-demo-content>
            </div>
            <!-- / CONTENT -->

        </div>
        <!-- / CONTENT CARD -->

    </div>
    <!-- / CENTER -->

</div>
